<template>
    <a-modal v-model="filterVisible" title="增长率" :footer="null" :centered="true">        
        <div class="variables">
            <div class="h2">选择变量：<a-checkbox @click="selectAll" :indeterminate="checkedList.length>0&&checkedList.length<list.length" :checked="checkedList.length===list.length&&list.length>0">全选</a-checkbox></div>
            <div class="list">
                <a-checkbox-group v-model="checkedList">
                    <div class="check-item" v-for="item in list" :key="item.index">
                        <a-checkbox :value="item.index">{{item.key}}</a-checkbox>
                    </div>
                </a-checkbox-group>
            </div>
        </div>

        <div class="ways">
            <div class="h2">方法：</div>
            <a-radio-group v-model="selectedType">
                <a-row>
                    <a-col :span="8">
                        <a-radio :value="'gryoy'">同比增长率
                            <a-tooltip placement="top">
                                <template slot="title">
                                <span>同比增长率是指和去年同期相比较的增长率，计算公式为：Y[t] = (X[t] – X[t-N])*100/ X[t-N]，N=12时，为月度同比增长率；N=4时，为季度同比增长率</span>
                                </template>
                                <span class="iconfont icon-info"></span>
                            </a-tooltip>
                        </a-radio>
                    </a-col>
                    <a-col :span="8">
                        <a-radio :value="'grpop'">环比增长率
                            <a-tooltip placement="top">
                                <template slot="title">
                                <span>环比增长率是指和上期相比较的增长率，计算公式为：Y[t] = (X[t] – X[t-1])*100/ X[t-1]</span>
                                </template>
                                <span class="iconfont icon-info"></span>
                            </a-tooltip>
                        </a-radio>
                    </a-col>
                    <a-col :span="8">
                        <a-radio :value="'grytd'">年比增长率
                            <a-tooltip placement="top">
                                <template slot="title">
                                <span>年比增长率是指和去年期末相比较的增长率，计算公式为Y[t] = (X[t] – X[end of previous Year])*100/ X[end of previous Year]</span>
                                </template>
                                <span class="iconfont icon-info"></span>
                            </a-tooltip>
                        </a-radio>
                    </a-col>
                </a-row>
            </a-radio-group>
        </div>
        
        <div class="btns">
            <a-button type="primary" ghost @click="cancel">取消</a-button>
            <a-button type="primary" @click="goApply">应用</a-button>
        </div>
    </a-modal>
</template>

<script>
import { messageTips } from '../until/tools';
export default {
    name:'CellFormat',
    props:['visible','sheetId'],
    data() {
        return {
            filterVisible:false,
            list:[],
            checkedList:[],
            selectedType:'gryoy'
        }
    },
    watch:{
        visible(value) {
            if(value) {
                this.filterVisible = true;
                this.checkedList = [];
                this.selectedType = 'gryoy';
                this.list = [];
                this.$http.getVars({sheetId:this.sheetId}).then(res=>{
                    if(res) {
                        this.list = res;
                    }
                });
            } else {
                this.filterVisible = false;
            }
        }
    },
    methods:{
        cancel() {
            this.filterVisible = false;
        },
        selectAll() {
            if(this.checkedList.length === this.list.length) {
                this.checkedList = [];
            } else {
                this.list.forEach(item=>{
                    let index = this.checkedList.indexOf(item.index);
                    if(index===-1) {
                        this.checkedList.push(item.index);
                    }
                });
            }            
        },
        goApply() {
            if(this.checkedList.length===0) {
                messageTips('请选择变量',2);
                return false;
            }
            let params = {
                action:'gr',
                indexs:this.checkedList.join(','),
                method:this.selectedType,
                sheetId:this.sheetId,
            }
            this.$emit('growthRate',{data:params});
            this.filterVisible = false;
        },
        
        
    }
}
</script>

<style lang="scss" scoped>
@import '../scss/_variables.scss';
    .h2 {
        font-weight: bold;
        .ant-checkbox-wrapper {
            font-weight:normal;
        }
    }
    .variables {
        .list {
            height:150px;
            border:1px solid #ddd;
            margin:10px 0;
            padding:5px 10px;
            overflow-y: auto;
            .check-item {
                padding:3px 0;
            }
        }
    }
    .ways {
        margin-top:20px;
        .icon-info {
            color:$primary-color;
        }
    }
</style>